import { Col, Input, Row, Form, Space, Button } from "antd"
import { UndoOutlined, SearchOutlined, DownOutlined, UpOutlined } from '@ant-design/icons';
import React, { useState } from "react";
import style from "./tableSearchPanel.module.scss";
import { XxtreeSelect, XxDatePicker, XxCascader, XxTextArea, XxRangePicker, XxSelect } from "@/ui";
import dayjs from "dayjs";


/**
 * @description What type of element is returned according to the parameter type value
 */
const getFormItemCoreEl = ({ TYPE, inputProps, key }) => {
    switch (TYPE) {
        case "Select": return <XxSelect key={key} {...inputProps} />;
        case "DatePicker": return <XxDatePicker key={key} {...inputProps} />;
        case "RangePicker": return <XxRangePicker key={key} {...inputProps} />;
        case "Cascader": return <XxCascader key={key} {...inputProps} />;
        case "TextArea": return <XxTextArea key={key} {...inputProps} />;
        case "TreeSelect": return <XxtreeSelect key={key}  {...inputProps} />
        default: return <Input key={key} allowClear {...inputProps} />;
    }
}


/**
 * @description　create Form.Item
 */
const createFormItem = ({ form, key, fields, TYPE, }) => {
    let formItemProps = {
        key: key,
        name: fields[key].name,
        label: fields[key].label,
        ...fields[key].formItemProps
    }

    // 针对时间的datePick特殊处理
    if (TYPE === 'DatePicker') {
        formItemProps = {
            getValueFromEvent: (...[, dateString]) =>
                dateString,
            getValueProps: (value) => ({
                value: value ? dayjs(value) : undefined
            }),
            ...formItemProps,
        }
    }
    // 时间范围的特殊处理
    if (TYPE === "RangePicker") {
        formItemProps = {
            getValueFromEvent: (...[, dateArray]) => {
                return dateArray
            },
            getValueProps: (value) => {
                // console.log('getValueProps', value)
                // return ({
                //     value: value ? value : undefined
                // })
            },
            ...formItemProps,
        }
    }


    const coreElProps = {
        key: key,
        form: form,
        TYPE: fields[key].TYPE,
        inputProps: {
            placeholder: `请输入${fields[key].label}`,
            ...fields[key].inputProps
        }
    }

    return (
        <Form.Item
            key={key}
            {...formItemProps}
        >
            {
                fields[key].render ? fields[key].render :
                    getFormItemCoreEl(coreElProps)}
        </Form.Item>
    )
}


/**
 * @description create form Row Element
 */
const RowElement = ({ form, fields, resetSearchParams = null }) => {

    const [collect, setCollect] = useState(false);

    const onChangeCollect = () => {
        setCollect(!collect);
    }

    return (
        <>
            <Row gutter={24} className={style.custom_row}>
                {
                    fields.map((item, key) => {
                        return (
                            <Col
                                span={8}
                                key={key}
                                TYPE={item.TYPE}
                                className={
                                    item.hidden ? "custom-col-hide" :
                                        ((collect && item.collect) ? "custom-col-hide" : "custom-col-show")
                                }
                            >
                                {
                                    createFormItem({
                                        form,
                                        key,
                                        fields,
                                        TYPE: item.TYPE,
                                    })
                                }
                            </Col>
                        )

                    })
                }

                {/* 重置 搜索功能模块 */}
                <Col>
                    <Space>
                        <Button
                            icon={<UndoOutlined />}
                            onClick={() => {
                                form.resetFields();
                                if (resetSearchParams) {
                                    resetSearchParams()
                                }
                            }}
                        >
                            重置
                        </Button>
                        <Button icon={<SearchOutlined />} type="primary" htmlType="submit">
                            查找
                        </Button>
                        {
                            fields.length > 3 ?
                                <Button
                                    onClick={onChangeCollect}
                                    type="link"
                                    icon={collect === true ? <DownOutlined /> : <UpOutlined />}
                                >{collect === true ? '展开' : '收起'}
                                </Button> : null
                        }

                    </Space>
                </Col>
            </Row>
        </>
    )
}



export {
    RowElement
}